<template>
  <div class="hospital">
    <div class="hospital-header">
      <el-row>
        <el-col :span="1">
          <el-button
            type="primary"
            v-btnpermission="'btn-fixhospiadd'"
            @click="addDialogVisible = true"
            >新增</el-button
          >
          <!-- <el-button type="primary" @click="addCS">测试 </el-button> -->
        </el-col>

        <el-col :span="1">
          <!-- 导入 -->
          <el-upload
            class="upload"
            :multiple="false"
            :show-file-list="false"
            accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :http-request="toLead"
          >
            <template #trigger>
              <el-button type="primary" v-btnpermission="'btn-fixhospiload'"
                >导入</el-button
              >
            </template>
          </el-upload>
        </el-col>
      </el-row>
      <el-card class="drug-head-contatiner-title2">
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item label="活动名称" prop="activityCode">
            <el-select
              v-model="formSearch.activityCode"
              placeholder="--请选择--"
            >
              <el-option
                v-for="item in activityDic"
                :key="item.Code"
                :label="item.Name"
                :value="item.Code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="医院名称" prop="chineseName">
            <el-input v-model="formSearch.chineseName" />
          </el-form-item>
          <el-form-item label="所属城市" prop="citycode">
            <el-tree-select
              v-model="formSearch.citycode"
              :data="cityTreeOption"
              :props="defaultProps"
              :render-after-expand="false"
              node-key="Code"
              check-strictly
            />
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select v-model="formSearch.type" placeholder="--请选择--">
              <el-option key="1" label="全闭环亚保医院" :value="1" />
              <el-option key="2" label="传染病定点医院" :value="2" />
              <el-option key="3" label="转诊定点医院" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="formSearch.address" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="hospital-list">
      <el-row>
        <el-col>
          <!-- 列表 -->
          <el-table :data="hospitalList" border stripe>
            <!-- 索引列 -->
            <el-table-column
              type="index"
              label="#"
              :index="indexMethod"
            ></el-table-column>
            <el-table-column prop="activityName" label="活动"></el-table-column>
            <el-table-column
              prop="ChineseName"
              label="中文名称"
            ></el-table-column>
            <el-table-column prop="typeName" label="医院类型"></el-table-column>
            <el-table-column
              prop="EnglishName"
              label="英文名称"
            ></el-table-column>
            <el-table-column prop="Address" label="地址"></el-table-column>
            <el-table-column
              prop="cityName"
              label="城市"
              width="90"
            ></el-table-column>
            <el-table-column
              prop="RecipientName"
              label="绑定医生"
            ></el-table-column>
            <el-table-column
              prop="ExternalMarker"
              label="设备编码"
            ></el-table-column>
            <el-table-column
              prop="ContactsName1"
              label="医院联系人(主)"
            ></el-table-column>
            <el-table-column
              prop="Telephone1"
              label="联系方式一"
            ></el-table-column>
            <el-table-column
              prop="Telephone2"
              label="联系方式二"
            ></el-table-column>
            <el-table-column prop="IsValid" label="是否有效">
              <template #default="scope">
                <el-switch
                  v-model="scope.row.IsValid"
                  :active-value="1"
                  :inactive-value="0"
                  disabled
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  v-btnpermission="'btn-fixhospiupdate'"
                  :icon="Edit"
                  @click="showEditDialog(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  v-btnpermission="'btn-fixhospidelete'"
                  @click="DeleteDialog(scope.row.Code)"
                  :icon="Delete"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="8">
          <el-pagination
            background
            layout="total,prev, pager, next"
            v-model:total="formSearch.total"
            v-model:page-size="formSearch.pageSize"
            v-model:current-page="formSearch.page"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
      <!-- 添加对话框 -->
      <el-dialog
        title="添加医院"
        v-model="addDialogVisible"
        @close="addDislogClosed"
        width="40%"
      >
        <el-form
          :model="addDialogForm"
          ref="addDialogRef"
          label-width="100px"
          :rules="hospitalFormRulesMixin.addFormRules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="中文名称" prop="ChineseName">
                <el-input
                  v-model="addDialogForm.ChineseName"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="英文名称" prop="EnglishName">
                <el-input
                  v-model="addDialogForm.EnglishName"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经度" prop="Lng">
                <el-input-number
                  :precision="7"
                  size="large"
                  v-model="addDialogForm.Lng"
                ></el-input-number> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="Lat">
                <el-input-number
                  :precision="7"
                  size="large"
                  v-model="addDialogForm.Lat"
                ></el-input-number> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="所属城市" prop="CityCode">
                <el-tree-select
                  v-model="addDialogForm.CityCode"
                  :data="cityTreeOption"
                  :props="defaultProps"
                  :render-after-expand="false"
                  node-key="Code"
                  check-strictly
                  @change="onCtiyClick"
                  filterable
                  clearable
                /> </el-form-item
            ></el-col>
            <el-col :span="10">
              <el-form-item label="所属活动" prop="ActivityCode">
                <el-select
                  v-model="addDialogForm.ActivityCode"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in activityDic"
                    :key="item.Code"
                    :label="item.Name"
                    :value="item.Code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="地址" prop="Address">
                <el-input
                  v-model="addDialogForm.Address"
                ></el-input></el-form-item
            ></el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="是否有效" prop="IsValid">
                <el-checkbox
                  v-model="addDialogForm.IsValid"
                  :true-label="1"
                  :false-label="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="类型" prop="Type">
                <el-select
                  v-model="addDialogForm.Type"
                  placeholder="--请选择--"
                >
                  <el-option key="1" label="全闭环亚保医院" :value="1" />
                  <el-option key="2" label="传染病定点医院" :value="2" />
                  <el-option key="3" label="转诊定点医院" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单兵编码" prop="EquipmentId">
                <el-input
                  v-model="addDialogForm.EquipmentId"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="医院等级" prop="Grade">
                <el-input
                  v-model="addDialogForm.Grade"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人(主)" prop="ContactsName1">
                <el-input
                  v-model="addDialogForm.ContactsName1"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="联系人电话" prop="Telephone1">
                <el-input
                  v-model="addDialogForm.Telephone1"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人(次)" prop="ContactsName2">
                <el-input
                  v-model="addDialogForm.ContactsName2"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="联系人电话" prop="Telephone2">
                <el-input v-model="addDialogForm.Telephone2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="10">
              <el-form-item label="绑定医生" prop="RecipientCode">
                <el-select
                  v-model="addDialogForm.RecipientCode"
                  clearable
                  placeholder="--请选择--"
                  filterable
                >
                  <el-option
                    v-for="item in doctorOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>
          </el-row> -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="序号" prop="SN">
                <el-input-number v-model="addDialogForm.SN"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDialogSubmit">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 修改对话框 -->
      <el-dialog title="修改医院" v-model="editDialogVisible" width="40%">
        <el-form
          :model="editDialogForm"
          ref="editDialogRef"
          label-width="100px"
          :rules="hospitalFormRulesMixin.editFormRules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="中文名称" prop="ChineseName">
                <el-input
                  v-model="editDialogForm.ChineseName"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="英文名称" prop="EnglishName">
                <el-input
                  v-model="editDialogForm.EnglishName"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="经度" prop="Lng">
                <el-input-number
                  :precision="7"
                  v-model="editDialogForm.Lng"
                  size="large"
                ></el-input-number> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="Lat">
                <el-input-number
                  :precision="7"
                  size="large"
                  v-model="editDialogForm.Lat"
                ></el-input-number> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="所属城市" prop="CityCode">
                <el-tree-select
                  v-model="editDialogForm.CityCode"
                  :data="cityTreeOption"
                  :props="defaultProps"
                  :render-after-expand="false"
                  node-key="Code"
                  check-strictly
                  filterable
                  clearable
                /> </el-form-item
            ></el-col>
            <el-col :span="10">
              <el-form-item label="所属活动" prop="ActivityCode">
                <el-select
                  v-model="editDialogForm.ActivityCode"
                  placeholder="--请选择--"
                >
                  <el-option
                    v-for="item in activityDic"
                    :key="item.Code"
                    :label="item.Name"
                    :value="item.Code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="地址" prop="Address">
                <el-input
                  v-model="editDialogForm.Address"
                ></el-input></el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="是否有效" prop="IsValid">
                <el-checkbox
                  v-model="editDialogForm.IsValid"
                  :true-label="1"
                  :false-label="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="类型" prop="Type">
                <el-select
                  v-model="editDialogForm.Type"
                  placeholder="--请选择--"
                >
                  <el-option key="1" label="全闭环亚保医院" :value="1" />
                  <el-option key="2" label="传染病定点医院" :value="2" />
                  <el-option key="3" label="转诊定点医院" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单兵编码" prop="EquipmentId">
                <el-input
                  v-model="editDialogForm.EquipmentId"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="医院等级" prop="Grade">
                <el-input
                  v-model="editDialogForm.Grade"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人(主)" prop="ContactsName1">
                <el-input
                  v-model="editDialogForm.ContactsName1"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="联系人电话" prop="Telephone1">
                <el-input
                  v-model="editDialogForm.Telephone1"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人(次)" prop="ContactsName2">
                <el-input
                  v-model="editDialogForm.ContactsName2"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="联系人电话" prop="Telephone2">
                <el-input v-model="editDialogForm.Telephone2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="绑定医生" prop="RecipientCode">
                <el-select
                  v-model="editDialogForm.RecipientCode"
                  clearable
                  placeholder="--请选择--"
                  filterable
                >
                  <el-option
                    v-for="item in doctorOptionUpdate"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="医生工号" prop="WorkCode">
                <el-input v-model="editDialogForm.WorkCode" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="序号" prop="SN">
                <el-input-number v-model="editDialogForm.SN"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editDialogSubmit"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Edit, Delete } from '@element-plus/icons-vue';
import { importExcel } from '@/utils/excel';
import { hospitalFormRulesMixin } from '@/utils/mixin';
import {
  addHospital,
  getHospitalList,
  updateHospital,
  deleteHospital,
  addHospitalList,
} from '@/network/hospital';
import {
  getActivityDic,
  getCityTree,
  getDoctorForhospi,
} from '@/network/dictionary.js';

let doctorOption = ref([]);
let doctorOptionUpdate = ref([]);
const addDialogVisible = ref(false);
//分页索引
const indexMethod = (index) => {
  return index + (formSearch.page - 1) * formSearch.pageSize + 1;
};
//查询参数
const formSearch = reactive({
  activityCode: '',
  chineseName: '',
  address: '',
  citycode: null,
  name: '',
  type: null,
  page: 1,
  pageSize: 10,
  total: 0,
});
//表单提交
const onSubmit = async () => {
  formSearch.page = 1;
  initData();
};
let doctorOptionConst = [];
//新增中城市变化事件
const onCtiyClick = (val) => {
  doctorOption.value = doctorOptionConst.filter((it) => it.CityCode == val);
};
//修改中城市变化事件
const onCtiyClickUpdate = (val) => {
  doctorOptionUpdate.value = doctorOptionConst.filter(
    (it) => it.CityCode == val,
  );
};
//重置
const onReset = async () => {
  formSearch.activityCode = '';
  formSearch.chineseName = '';
  formSearch.address = '';
  formSearch.citycode = '';
  formSearch.type = null;
  formSearch.name = '';
  formSearch.page = 1;
  initData();
};
const handleCurrentChange = async (val) => {
  formSearch.page = val;
  initData();
};

const addDialogForm = ref({
  Code: 0,
  Address: '',
  ChineseName: '',
  EnglishName: '',
  Lng: 0.0,
  Lat: 0.0,
  ContactsName1: '',
  ContactsName2: '',
  Telephone1: '',
  Telephone2: '',
  ActivityCode: null,
  CityCode: null,
  IsValid: 1,
  Type: 1,
  EquipmentId: '',
  Grade: '',
  RecipientCode: null,
  SN: 0,
});
const addDialogRef = ref(null);
const addDislogClosed = () => {
  // addDialogForm.value = {};
  addDialogRef.value.clearValidate();
  addDialogRef.value.resetFields();
  addDialogVisible.value = false;
};
//初始化数据
const hospitalList = ref([]);
const initData = async () => {
  let searchParams = {
    page: formSearch.page,
    pageSize: formSearch.pageSize,
    address: formSearch.address,
    chineseName: formSearch.chineseName,
    citycode: formSearch.citycode,
    activityCode: formSearch.activityCode,
    type: formSearch.type,
  };
  await getHospitalList(searchParams).then((res) => {
    hospitalList.value = res.data;
    formSearch.total = res.total;
  });
};
//初始化字典
const cityTreeOption = ref([]);
const defaultProps = {
  children: 'Children',
  label: 'Name',
  value: 'Code',
};
const activityDic = ref([]);
const initDict = async () => {
  await getActivityDic().then((res) => {
    activityDic.value = res;
  });
  await getCityTree().then((res) => {
    cityTreeOption.value = res;
  });
};

onMounted(() => {
  initData();
  initDict();
});
//查询数据

// 添加对话框提交
const addDialogSubmit = () => {
  addDialogRef.value.validate(async (valid) => {
    if (valid) {
      await addHospital(addDialogForm.value)
        .then(() => {
          ElMessage.success('添加成功');
          addDislogClosed();
          initData();
        })
        .catch(() => {
          ElMessage.error('添加失败');
        });
    } else {
      ElMessage.error('请按要求填写');
      return false;
    }
  });
};
//修改对话框提交
const showEditDialog = async (row) => {
  editDialogForm.value = JSON.parse(JSON.stringify(row));
  //修改，更新医生字典。
  //从人员表取医生
  await getDoctorForhospi({
    hospiCode: editDialogForm.value.Code,
    activityCode: editDialogForm.value.ActivityCode,
  }).then((res) => {
    doctorOptionConst = res;
    doctorOption.value = res;
    doctorOptionUpdate.value = res;
  });
  editDialogVisible.value = true;
};
const editDialogRef = ref(null);
let editDialogVisible = ref(false);
let editDialogForm = ref({
  Code: 0,
  Address: '',
  ChineseName: '',
  EnglishName: '',
  Lng: 0.0,
  Lat: 0.0,
  ContactsName1: '',
  ContactsName2: '',
  Telephone1: '',
  Telephone2: '',
  ActivityCode: '',
  CityCode: 1,
  IsValid: 1,
  Type: 1,
  EquipmentId: '',
  Grade: '',
  RecipientCode: null,
  WorkCode: '',
  SN: 0,
});
const editDialogSubmit = () => {
  editDialogRef.value.validate(async (valid) => {
    if (valid) {
      console.table(editDialogForm.value, '修改实体');
      await updateHospital(editDialogForm.value)
        .then(() => {
          ElMessage.success('修改成功');
          editDialogVisible.value = false;
          initData();
        })
        .catch((err) => {
          ElMessage.error(err.message);
        });
    } else {
      console.log('error submit!!');
      return false;
    }
  });
};
// const editDislogClosed = () => {
//   editDialogForm.value = {};
//   editDialogVisible.value = false;
// };
//删除数据
const DeleteDialog = (id) => {
  ElMessageBox.confirm('确定删除吗?', '提示', {
    type: 'warning',
  })
    .then(async () => {
      await deleteHospital({ code: id })
        .then(() => {
          initData();
          ElMessage.success('删除成功');
        })
        .catch((err) => {
          ElMessage.warning(err.message);
          console.log(err);
        });
    })
    .catch(() => {
      console.log('取消');
    });
};
//导入Excel表格
const toLead = (e) => {
  importExcel.methods.importExcel(e, (res) => {
    if (res.length > 0) {
      addHospitalList(res).then(() => {
        ElMessage.success('导入成功');
        initDict();
        initData();
      });
    } else {
      ElMessage.error('请选择文件');
    }
  });
};
</script>

<style lang="scss" scoped>
.hospital {
  margin: 14px 15px 14px;
  .hospital-header {
    .drug-head-contatiner-title2 {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-top: 14px;
    }
  }
  .hospital-list {
    margin-top: 14px;
  }
}
</style>
